<template>
	<div>
		<el-row style="display: flex;justify-content: center; flex-wrap:wrap">
			
			<el-col :span="6" v-for="(o, index) in subjects" :key="o.subjectId" style="margin:10px 20px;">
				<router-link :to="{path:'subject/quest',query:{id:o.subjectId}}">
					<el-card :body-style="{padding: '0px'}" shadow="hover">
						<div style="display: flex;height: 100px;">
							<div style="width: 30%;display: flex;justify-content: center;align-items: center;">
								<i class="el-icon-goblet-square-full"  style="font-size: 40px;"></i>
							</div>
							<div style="width: 70%;display: flex;justify-content: center;align-items: center;">
								<h1 v-text="o.subjectName"></h1>
							</div>
						</div>
					</el-card>
				</router-link>
			</el-col>
			
		</el-row>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				subjects:[
					{
						subjectId:'1',
						subjectIcon:'',
						subjectName:'java基础阶段'
					},
					{
						subjectId:'2',
						subjectIcon:'',
						subjectName:'java web阶段'
					},
					{
						subjectId:'3',
						subjectIcon:'',
						subjectName:'java高级课程'
					},
					{
						subjectId:'4',
						subjectIcon:'',
						subjectName:'前端新技术'
					},
					{
						subjectId:'5',
						subjectIcon:'',
						subjectName:'java新技术'
					}
				]
			};
		},
		created() {
			
		}
		
	}
</script>

<style>
	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>

